<template>
  <div class="detail-content">
    <el-row :gutter="20">
      <el-col :span="6">
        <span>用户名:</span>
        {{ objData.userName }}
      </el-col>
      <el-col :span="6">
        <span>IP地址:</span>
        {{ objData.ipAddress }}
      </el-col>
      <el-col :span="6">
        <span>无效点击报告编码:</span>
        {{ objData.invalidReportId }}
      </el-col>
      <el-col :span="6">
        <span>过滤前点击量:</span>
        {{ objData.filterateClick }}
      </el-col>
      <el-col :span="6">
        <span>过滤前点击金额:</span>
        {{ objData.filterateClickAmount }}
      </el-col>
      <el-col :span="6">
        <span>无效点击量:</span>
        {{ objData.invalidClick }}
      </el-col>
      <el-col :span="6">
        <span>无效点击金额:</span>
        {{ objData.invalidClickAmount }}
      </el-col>
      <el-col :span="6">
        <span>计费点击量:</span>
        {{ objData.billableClick }}
      </el-col>
      <el-col :span="6">
        <span>计费点击金额:</span>
        {{ objData.billableClickAmount }}
      </el-col>
      <el-col :span="6">
        <span>包含关键词:</span>
        {{ objData.containsKeywords }}
      </el-col>
      <el-col :span="6">
        <span>搜索字词:</span>
        {{ objData.searchTerm }}
      </el-col>
      <el-col :span="6">
        <span>展现:</span>
        {{ objData.toShow }}
      </el-col>
      <el-col :span="6">
        <span>推广设备:</span>
        {{ objData.promotionDevice }}
      </el-col>
      <el-col :span="6">
        <span>查询范围:</span>
        {{ objData.queryScope }}
      </el-col>
    </el-row>
    <el-button class="btn-back" type="primary" plain @click="$emit('handleCancle')">返回</el-button>
  </div>
</template>
<script>
export default {
  name: "detail",
  data() {
    return {};
  },
  props: {
    // 详情数据
    objData: {
      type: Object,
      default: () => {}
    }
  },
  methods: {}
};
</script>
<style scoped lang="scss">
.detail-content {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  .el-col {
    margin: 12px 0;
    span {
      color: #409eff;
    }
  }
  .btn-back {
    display: flex;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
